<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/menu.css" media="screen" />
    
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/estilos.css" media="screen" />
  
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/slick.pager.css" type="text/css"/> 
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/slick.columnpicker.css" type="text/css"/>
  
  
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui-1.8.16.custom.css" type="text/css"/>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/examples.css" type="text/css"/>
   
  
<script src="${pageContext.request.contextPath}/js/jquery-1.7.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.event.drag-2.2.js"></script> 
<script src="${pageContext.request.contextPath}/js/slick.core.js"></script>
<script src="${pageContext.request.contextPath}/js/slick.grid.js"></script>
 
<script src="${pageContext.request.contextPath}/js/firebugx.js"></script> 
<script src="${pageContext.request.contextPath}/js/jquery-ui-1.8.16.custom.min.js"></script>   
<script src="${pageContext.request.contextPath}/js/slick.formatters.js"></script>
<script src="${pageContext.request.contextPath}/js/slick.editors.js"></script>
<script src="${pageContext.request.contextPath}/js/slick.rowselectionmodel.js"></script> 
<script src="${pageContext.request.contextPath}/js/slick.dataview.js"></script>
<script src="${pageContext.request.contextPath}/js/slick.pager.js"></script>
<script src="${pageContext.request.contextPath}/js/slick.columnpicker.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.css">
<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-ui.js"></script>


<script type="text/javascript">

function cargaOpcion(opcion){
	
	document.formcarga.action ="${pageContext.request.contextPath}/"+opcion;
	document.formcarga.submit();
}

$(function() {
// 	  if ($.browser.msie && $.browser.version.substr(0,1)<7)
// 	  {
		$('li').has('ul').mouseover(function(){
			$(this).children('ul').css('visibility','visible');
			}).mouseout(function(){
			$(this).children('ul').css('visibility','hidden');
			})
// 	  } 
	}); 
	
	
$(function() {
	  
	  
	  var clave = $( "#clave" ),
    clavec = $( "#clavec" );
	  
	  
	    function checkLength( o, n, min, max ) {
	        if ( o.val().length > max || o.val().length < min ) {
	          o.addClass( "ui-state-error" );
	          updateTips( "Logitud de " + n + " debe estar entre " +
	            min + " y " + max + "." );
	          return false;
	        } else {
	          return true;
	        }
	      }
    
  $( "#dialog-form-clave" ).dialog({
    autoOpen: false,
    height: 220,
    width: 300,
    modal: true,
    buttons: {
      "Cambiar clave": function() {
        var bValid = true;
      
        bValid = bValid && checkLength( clave, "Clave", 4, 16 );
        bValid = bValid && checkLength( clavec, "Confirmacion de clave", 4, 16 );  
        if(document.getElementById('clave').value==document.getElementById('clavec').value){
      	     if ( bValid ) {
      	  document.getElementById("frmclave").action="${pageContext.request.contextPath}/login/change";
      	  document.getElementById("frmclave").submit();
        	}
        }else{
      	  alert('La confirmacion debe ser igual a la clave');
        }
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    },
    close: function() {

    }
  });

  $( "#cambiar-clave" ) 
    .click(function() {
      $( "#dialog-form-clave" ).dialog( "open" );
    });
});
	
</script>

<form name="formcarga" method="get" >
</form>

  <div id="dialog-form-clave" title="Cambiar clave"> 
 
  <form:form id="frmclave"   method="POST"  >
 
    <label for="clave">Clave nueva</label>
    <input type="password" name="clave" id="clave"  class="text ui-widget-content ui-corner-all">
   
    <label for="clavec">Confirmar clave nueva</label>
    <input type="password" name="clavec" id="clavec"  class="text ui-widget-content ui-corner-all"> 
 
  </form:form>
</div>
  
<div  class="ventana_cabecera" >
<table style="width: 95%;margin-left: auto;margin-right: auto;min-width: 800px " >
<tr>
<td width="5%" >
</td>
<td width="75%"    > 
	<h1>
	Bienvenido <c:out value="${usuario.nombre}"  ></c:out> 
	</h1> 
</td>
<td width="20%" >
<table style="width: 90%"  >
<tr>
<!-- <td><a href="#" >Mi usuario</a></td> -->
<td width="20%" ></td>
<td><a href="#" id="cambiar-clave" >Cambiar clave</a></td>
<td><a href="${pageContext.request.contextPath}/logout" >Salir</a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<ul id="menu"  style="background:white; width: 90%;margin: auto;"  > 
	 <c:out value="${menu}" escapeXml="false" > </c:out> 
</ul> 
<div style="background: #FCA21C;height: 1px;width: 90%;margin: auto;"  > 
</div> 
<br/>